{% load i18n %}
{% load static %}
<!-- Page header -->
<div class="page-wrapper">
    <div class="page-header d-print-none">
        <div class="container-xl">
            <div class="row g-2 align-items-center">
                <div class="col">
                    <div class="page-pretitle">
                        Instances
                    </div>
                    <h2 class="page-title">
                        {% trans "Instances" %}
                    </h2>
                </div>
            </div>
        </div>
    </div>

    <!-- Page body -->
    <div class="page-body">
        <div class="container-xl">
            <div class="card">
                <div class="card-header">
                    <div class="card-actions">
                        {% if request.user.is_superuser %}
                            {% include 'create_inst_block.html' %}
                        {% endif %}
                    </div>
                </div>

                <div class="card-body">
                    <div id="table-default" class="table-responsive">
                    <table class="table card-table table-vcenter text-nowrap" id="instTable">
                        <thead>
                            <tr>
                                <th><button class="table-sort" data-sort="sort-name">{% trans 'Name' %}</button></th>
                                {% comment %} - {% endcomment %}
                                {% comment %} <th scope="col">{% trans 'Name' %}<br>{% trans 'Description' %}</th> {% endcomment %}
                                {% if request.user.is_superuser %}
                                    {% comment %} <th scope="col">{% trans 'Host' %}<br>{% trans 'User' %}</th> {% endcomment %}
                                    <th><button class="table-sort" data-sort="sort-host">{% trans 'Host' %}</button></th>
                                {% endif %}
                                <th scope="col">{% trans 'Status' %}</th>
                                {% if app_settings.VM_DRBD_STATUS == 'True' %}
                                    <th scope="col">{% trans 'Role/Disk' %}</th>
                                {% endif %}
                                <th scope="col">{% trans 'VCPU' %}</th>
                                <th scope="col">{% trans 'Memory' %}</th>
                                <th scope="col" data-sortable="false">{% trans 'Actions' %}</th>
                                <th scope="col">{% trans 'Remarks' %}</th>
                            </tr>
                        </thead>
                        <tbody class="searchable">
                            {% for instance in instances  %}
                                {% if instance.compute.status is True %}
                                    <tr>
                                        <td class="sort-name">
                                            <a class="link-primary" href="{% url 'instances:instance' instance.id %}">
                                                {{ instance.name }}
                                            </a>
                                            <br>
                                            <p class="m-0 small font-italic">{{ instance.title }}</p>
                                        </td>
                                        {% if request.user.is_superuser %}
                                            <td class="sort-host">
                                                <a href="{% url 'overview' instance.compute.id %}">{{ instance.compute.name }}</a><br>
                                                    <small><em>
                                                        {% if instance.userinstance_set.all.count > 0 %}
                                                        {{ instance.userinstance_set.all.0.user }}
                                                        {% if instance.userinstance_set.all.count > 1 %}
                                                        (+{{ instance.userinstance_set.all.count|add:"-1" }})
                                                        {% endif %}
                                                        {% endif %}
                                                    </em></small>
                                            </td>
                                        {% endif %}
                                        <td>
                                            {% if instance.proxy.instance.info.0 == 1 %}<span
                                                class="text-success">{% trans "Active" %}</span>{% endif %}
                                            {% if instance.proxy.instance.info.0 == 5 %}<span
                                                class="text-danger">{% trans "Off" %}</span>{% endif %}
                                            {% if instance.proxy.instance.info.0 == 3 %}<span
                                                class="text-warning">{% trans "Suspended" %}</span>{% endif %}
                                        </td>
                                        {% if app_settings.VM_DRBD_STATUS == 'True' %}
                                        <td>
                                            {% if instance.drbd == "Primary/OK" or instance.drbd == "Secondary/OK" %}<span class="text-success">{% else %}<span class="text-danger">{% endif %}{{ instance.drbd }}</span>
                                        </td>
                                        {% endif %}
                                        <td>{{ instance.proxy.instance.info.3 }}</td>
                                        <td>{{ instance.cur_memory }} MB</td>
                                        <td class="text-nowrap">
                                            {% include 'instance_actions.html' %}
                                        </td>
                                        <td>{{ instance.remarks }}</td>
                                    </tr>
                                {% endif %}
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
        </div>
        </div>
    </div>
    </div>
</div>

{% block script %}
    <link href="{% static 'css/jquery.dataTables.min.css' %}" rel="stylesheet">
    <script type="text/javascript" src="{% static 'js/jquery.dataTables.min.js' %}"></script>

    <script>
        $('#instTable').DataTable({
            autoWidth:true,////不开启自动宽度，用bootstrap的自适应去调整
            "lengthMenu": [10, 20, 50, 100],//表格行数选择框内数目 显示2条,4条,20条,50条
            "displayLength": 10,//默认的显示行数 (也就是每页显示几条数据)
            "order": [],
            "language": {//自定义语言提示
                "processing": "处理中...",
                "lengthMenu": "显示 _MENU_ 项结果",
                "zeroRecords": "没有找到相应的结果",
                "info": "第 _START_ 至 _END_ 行，共 _TOTAL_ 行",
                "infoEmpty": "第 0 至 0 项结果，共 0 项",
                "infoFiltered": "(由 _MAX_ 项结果过滤)",
                "search": "搜索",
                "infoPostFix": "",
                "url": "",
                "thousands": "'",
                "emptyTable": "表中数据为空",
                "loadingRecords": "载入中...",
                "infoThousands": ",",
                "paginate": {
                    "first": "首页",
                    "previous": "上页",
                    "next": "下页",
                    "last": "末页"
                }
            }
        });
    </script>
{% endblock script %}